Vue.component("top",{
    template: `
    <div class="c1">
        <el-card class="box-card c1">
            <div class="f"><img class="i1" src="image/字体.png"></div>
            <div class="f">
                <span>
                    <a href="index.html" class="f p1">首页</a>
                    <a href="questions.html" class="f p1">题目库</a>
                    <a href="search.html" class="f p1">题目查询</a>
                    <a href="myclass.html" class="f p1">兴趣群</a>
                    <a href="mypaper.html" class="f p1">我的试卷</a>
                </span>
            </div>
            <!-- 用户信息 -->
            <div class="user" v-if="user != null">  
            <el-popover  
              placement="bottom"  
              width="200"  
              trigger="hover">  
              <div class="popover-content">  
                <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">  
                  <el-menu-item index="1">修改密码</el-menu-item>  
                  <el-menu-item index="2">修改个人信息</el-menu-item>
                  <el-menu-item index="3">我的错题集</el-menu-item>  
                  <el-menu-item index="4">我的刷题记录</el-menu-item>
                  <el-menu-item index="5">我的收藏</el-menu-item>
                  <el-menu-item index="6">退出登录</el-menu-item>
                </el-menu>  
              </div>  
              <template #reference>  
                <el-avatar :style="{  
                  backgroundImage: 'url(' + user.pic + ')',  
                  backgroundSize: 'cover',  
                  backgroundColor: '#f0f2f5' // 可选，设置背景色以防图片加载失败  
                }"  
                size="large"  
                class="custom-avatar"  
              ></el-avatar>
              </template> 
            </el-popover>
            
          </div>
            <div class="user" v-else><a style="text-decoration: none;color: #333333" href="login.html">登录</a></div>
            </el-card>
            
      <el-dialog  
        title="修改密码"  
        :visible.sync="dialogVisible"  
        width="30%"  
          >  
        <div class="input-container">  
          <el-input  
            placeholder="请输入原密码"  
            v-model="oldPassword"  
            type="password"
            style="margin-bottom: 20px;"
          ></el-input>  
          <el-input  
            placeholder="请输入新密码"  
            v-model="newPassword"  
            type="password"  
            style="margin-bottom: 20px;"
          ></el-input>  
          <el-input  
            placeholder="请再次输入新密码"  
            v-model="confirmPassword"  
            type="password"  
            style="margin-bottom: 20px;"
          ></el-input>  
        </div>  
        <span slot="footer" class="dialog-footer">  
          <el-button @click="dialogVisible = false">取 消</el-button>  
          <el-button type="primary" @click="confirmPasswordChange">确 定</el-button>  
        </span>
      </el-dialog>
      
      <el-dialog  
      title="修改信息"  
      :visible.sync="dialogVisible1"  
      width="30%">  
      <el-form class="dialog-content">  
        <!-- 用户名输入框 -->  
        <el-form-item label="用户名">
          <el-input v-model="userInfo.name" placeholder="请输入用户名"></el-input>
        </el-form-item>  
          
        <!-- 头像上传区域 -->  
        <!--      图片-->
      <el-form-item label="用户头像">
      <!--      图片-->
      <el-upload
              class="upload-demo"
              action="cloud-other/review/upload"
              :on-change="handleChange"
              :file-list="fileList"
              :auto-upload="true"
              :on-success="upyes"
              :before-remove="handleRemove"
              :on-error="upno"
              list-type="picture"
              :limit="1">
        <i slot="trigger" class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible2" width="30%">
        <img :src="dialogImageUrl" style="width: 100%; display: block;" alt="预览图">
      </el-dialog>
      
      </el-form-item>
      </el-form>  
        
      <!-- 弹窗底部操作按钮 -->  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible1 = false">取 消</el-button>  
        <el-button type="primary" @click="updateuser">确 定</el-button>  
      </span>  
    </el-dialog>
      
<!--      样式-->
      
      <style scoped>
                .popover-content .el-menu-vertical-demo {  
                  border: none; /* 去除边框 */  
                }  
                  
                .popover-content .el-menu-item {  
                  font-size: 14px; /* 调整字体大小 */  
                  padding: 10px 20px; /* 调整内边距 */  
                }  
                  
                .popover-content .el-menu-item:hover {  
                  background-color: #f0f0f0; /* 鼠标悬停时的背景色 */  
                }  
                </style>
                
                <style scoped>  
                .avatar-uploader .el-upload {  
                  border: 1px dashed #d9d9d9;  
                  border-radius: 6px;  
                  cursor: pointer;  
                  position: relative;  
                  overflow: hidden;  
                }  
                .avatar-uploader .el-upload:hover {  
                  border-color: #409EFF;  
                }  
                .avatar-uploader-icon {  
                  font-size: 28px;  
                  color: #8c939d;  
                  width: 178px;  
                  height: 178px;  
                  line-height: 178px;  
                  text-align: center;  
                }  
                .avatar {  
                  width: 178px;  
                  height: 178px;  
                  display: block;  
                }
                .custom-avatar {  
                  border-radius: 50%;
                }
                /*去除upload组件过渡效果*/
    .el-upload-list__item {
      transition: none !important;
    }
               
</style>
            
    </div>
    `,
    data(){
        return{
            user:null,
            dialogVisible: false,
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
            dialogVisible1: false,
            userInfo: {name: '', pic: ''},
            fileList: [
                {
                    name: 'pic',
                    url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.mPGy-QSWMXym-J4zC_MJfwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2'
                }],
            dialogImageUrl: '',
            dialogVisible2: false,
        }
    },
    methods:{
        myinfo(){
            var jwt = sessionStorage.getItem("jwt");
            if(jwt == null || jwt == ""){
                location.href = "login.html";
                return;
            }
            axios.get("cloud-user/myinfo",{
                headers:{
                    Authorization: jwt
                }
            }).then(res=>{
                if(res.data.code == 1){
                    this.user = res.data.data;
                    // 注册自定义事件
                    this.$emit("getuser",this.user);
                    this.userInfo.name = this.user.name;
                    this.userInfo.pic = this.user.pic;
                }else{
                    location.href = "login.html";
                }
            })
        },
        handleSelect(index, indexPath) {
            // 根据index执行不同的操作，例如路由跳转或打开对话框
            if (index === '1') {
                // 修改密码
                this.dialogVisible = true;
                this.oldPassword = '';
                this.newPassword = '';
                this.confirmPassword = '';
            } else if (index === '2') {
                // 修改个人信息
                this.userInfo.name = this.user.name;
                this.userInfo.pic = this.user.pic;
                if(this.fileList.length === 0){
                    this.fileList = [
                        {
                            name: 'pic',
                            url: this.userInfo.pic
                        }]
                }
                if (this.fileList[0].name !== '我的头像' || this.fileList[0].url !== this.userInfo.pic) {
                    this.fileList[0] = {
                        name: '我的头像',
                        url: this.userInfo.pic
                    };
                }
                this.dialogVisible1 = true;
            } else if (index === '3') {
                // 我的错题集
                location.href = "dono.html";
            } else if (index === '4') {
                // 我的刷题记录
                location.href = "record.html";
            } else if (index === '5') {
                // 我的收藏
                location.href = "collection.html";
            } else if (index === '6') {
                // 退出登录
                axios.get("cloud-user/logout").then(res=>{
                    if(res.data.code == 1){
                        //退出登录
                        // 删除会话存储
                        sessionStorage.removeItem("jwt");
                        //跳转到登录界面
                        location.href = "login.html";
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        confirmPasswordChange() {
            if (this.newPassword === this.oldPassword) {
                this.$message.error('新旧密码不能一致！');
                return;
            }
            if (this.newPassword !== this.confirmPassword) {
                this.$message.error('两次输入的密码不一致！');
                return;
            }

            //修改密码请求
            var jwt = sessionStorage.getItem("jwt");
            let p = new URLSearchParams();
            p.append('oldPassword', this.oldPassword);
            p.append('newPassword', this.newPassword);
            axios.post("cloud-user/updatepwd", p,{
                headers:{
                    Authorization: jwt
                }
            }).then(res=>{
                if(res.data.code == 1){
                    //修改成功
                    this.$message(res.data.msg);
                    //退出登录
                    this.handleSelect('6', null);
                }else{
                    this.$alert(res.data.msg);
                }
            });
        },
        // 文件上传
        handleChange(file, fileList) {
            // 如果已经选择了文件，则不再允许添加新的文件
            this.fileList = fileList;
            if (this.fileList.length > 1) {
                this.$message.error('只能上传一张图片！');
                // 可以选择移除多余的文件
                this.fileList.splice(1);
            }
            // 如果文件列表中有文件，显示预览
            if (this.fileList.length > 0) {
                this.dialogImageUrl = this.fileList[0].raw ? URL.createObjectURL(this.fileList[0].raw) : this.fileList[0].url;
                this.dialogVisible2 = true;
            }
        },
        handleRemove(file, fileList) {
            // 移除文件并关闭预览
            this.fileList = fileList.filter(f => f.name !== file.name);
            this.dialogVisible2 = false;
        },
        //文件上传成功
        upyes(response){
            this.userInfo.pic = response.data;
        },
        //失败
        upno(err){
            alert("抱歉，请重新上传！");
        },
        //修改用户信息
        updateuser() {
            // 检查用户名和头像是否都已填写
            if (this.userInfo.pic !== '' && this.userInfo.name !== '') {
                // 检查是否真的没有做任何修改
                if(this.fileList.length === 0){
                    this.$alert("请选择头像");
                    return;
                }
                if (this.userInfo.name === this.user.name && this.fileList[0]?.url === this.user.pic) {
                    this.$alert("未修改");
                    return;
                }

                var jwt = sessionStorage.getItem("jwt");

                // 只修改了头像
                if (this.userInfo.name === this.user.name && this.fileList[0]?.url !== this.user.pic) {
                    axios.get("cloud-user/updateuser", {
                        params: {
                            name: '',
                            pic: this.userInfo.pic
                        },
                        headers:{
                            Authorization: jwt
                        }
                    }).then(res => {
                        if(res.data.code == 1){
                            //修改成功
                            this.$message(res.data.msg);
                            //存储
                            sessionStorage.setItem("jwt", res.headers.authorization);
                            this.user = res.data.data;
                        }else{
                            this.$alert(res.data.msg);
                        }
                    });
                }

                // 只修改了名称
                if (this.userInfo.name !== this.user.name && (!this.fileList[0] || this.fileList[0].url === this.user.pic)) {
                    axios.get("cloud-user/updateuser", {
                        params: {
                            name: this.userInfo.name,
                            pic: ''
                        },
                        headers:{
                            Authorization: jwt
                        }
                    }).then(res => {
                        if(res.data.code == 1){
                            //修改成功
                            this.$message(res.data.msg);
                            //存储
                            sessionStorage.setItem("jwt", res.headers.authorization);
                            this.user = res.data.data;
                        }else{
                            this.$alert(res.data.msg);
                        }
                    });
                }

                // 都修改了
                if (this.userInfo.name !== this.user.name && this.fileList[0]?.url !== this.user.pic) {
                    axios.get("cloud-user/updateuser", {
                        params: {
                            name: this.userInfo.name,
                            pic: this.userInfo.pic
                        },
                        headers:{
                            Authorization: jwt
                        }
                    }).then(res => {
                        if(res.data.code == 1){
                            //修改成功
                            this.$message(res.data.msg);
                            //存储
                            sessionStorage.setItem("jwt", res.headers.authorization);
                            this.user = res.data.data;
                        }else{
                            this.$alert(res.data.msg);
                        }
                    });
                }
            } else {
                this.$alert("用户名与头像不能为空");
            }
        }
    },
    created(){
        this.myinfo();
    }
});